In this tutorial, we learn how best to organize the folder structure of an Angular Application. Finding the right folder structure for your real-life Angular application is very important. As you add more and more features to your App locating a certain component or file becomes messy if you do not have the proper structure in place.
The Angular uses the concept of Angular Modules to group together the related features. This gives us a nice starting point to organize the folder structure. Each Module should get its own folder named after the Module Name.
The Angular does not make any distinction between the Modules. but based on how we make use of modules, we can classify our modules into the following four categories
The Angular requires one module to be loaded as the application starts. We call this as root module. The root module loads the root component and all other modules
The root module is conventionally called as AppModule and created under the /src/app.folder
The Features module implements a specific feature of the Application. All the components, pipes & directives which implement the feature become part of the module.
Further Reading on Angular Modules
All the components belonging to Feature Modules must be placed inside a directory named after the module. For Example /src/app/ <ModuleName>. By doing so, we make it easy to search a component belonging to the module
You can create subfolders for directives, pipes under the module folder
You can create a components folder and put all your components there. Or create a subfolder for each component under the components folder
Another option to create a pages folder. Each route is a page. The folder is named after the route path. The route might contain more than one component. All of them placed under that page folder. The shared components can be placed under the separate components folder.
The idea of pages is borrowed from this article on Medium
├── src
│ ├── app
│ │ ├── admin
│ │ │ ├── components
│ │ │ │ ├── shared.component.ts
│ │ │ ├── directives
│ │ │ │ ├── first.directive.ts
│ │ │ │ ├── another.directive.ts
│ │ │ ├── pages
│ │ │ │ ├── dashboard
│ │ │ │ │ ├── dashboard.component.ts
│ │ │ │ ├── rights
│ │ │ │ │ ├── rights.component.ts
│ │ │ │ ├── user
│ │ │ │ │ ├── user.component.ts
│ │ │ │ ├── admin.component.ts
│ │ │ │ ├── admin.component.html
│ │ │ │ ├── admin.component.css
│ │ │ │ ├── index.ts
│ │ │ ├── pipes
│ │ │ │ ├── first.pipe.ts
│ │ │ │ ├── another.pipe.ts
│ │ │ ├── admin.module.ts
│ │ │ ├── admin.routing.module.ts
│ │ │ ├── index.ts
There are many components, directives & pipes, which we may like to share across various modules. All these components should go into the shared module.
The shared module and must declare the components, pipes, and directives using the declarations metadata and export it using the exports metadata
Other Modules can import the shared modules and use the exported components, directives & pipes
The Services must not be defined here. Since the shared modules are imported everywhere, it may create a new instance of the service if it is imported in the lazy loaded modules.
The Shared module must be created under the folder /src/app/shared folder.
The Shared module should not have any dependency on any of the other modules in the application.
The commonly required angular modules like ( CommonModule, FormsModule, etc) or third party modules can be imported here and re-exported. The other module importing the shared module does not have to import those modules.
You can follow the following folder structure, where each shared feature is created in its own own folder.
├── src
│ ├── app
│ │ ├── shared
│ │ │ ├── layout
│ │ │ │ ├── footer
│ │ │ │ │ ├── footer.component.ts
│ │ │ │ │ ├── footer.component.html
│ │ │ │ ├── header
│ │ │ │ │ ├── header.component.ts
│ │ │ │ │ ├── header.component.html
│ │ │ ├── index.ts
Or you can create folders like components, pipes, directives as shown below
├── src
│ ├── app
│ │ ├── shared
│ │ │ ├── components
│ │ │ │ ├── footer
│ │ │ │ │ ├── footer.component.ts
│ │ │ │ │ ├── footer.component.html
│ │ │ │ ├── header
│ │ │ │ │ ├── header.component.ts
│ │ │ │ │ ├── header.component.html
│ │ │ ├── pipes
│ │ │ │ ├── pipe1
│ │ │ │ │ ├── pipe1.pipe.ts
│ │ │ ├── index.ts
The Services shared across the application must become part of the CoreModule. The user authentication services, services that fetch data are examples of such services.
The Services usually needs to be Singleton, Only one instance of the Service must exist. Providing it in CoreModule ensures that the services remain singleton
The core module must be imported only in the root module. Other modules must not import the core modules. You can use the following code to stop the other modules from importing the core module.
@NgModule,({})
export class CoreModule {
constructor(@Optional,() @SkipSelf,() core:CoreModule ){
if (core) {
throw new Error,("You should import core module only in the root module")
}
}
}
The CoreModule must be created under the folder /src/app/core folder.
Under the core folder, you can create subfolders for each service under the services folder.
Let us build a simple with shared, core and feature module
Create a new application using ng new
ng new --routing --style css ModuleDemo
Now let us create three feature modules AdminModule, GthubModule & HomeModule
Create the admin folder under /src/app folder
Under the /src/app/admin folder create the admin.module.ts
/src/app/admin/admin.module.ts
import { NgModule } from '@angular/core';
import { AdminRoutingModule } from './admin.routing.module';
import { UserComponent,RightsComponent,DashboardComponent, AdminComponent } from './pages';
@NgModule({
declarations: [UserComponent,RightsComponent,DashboardComponent,AdminComponent],
imports: [
AdminRoutingModule,
],
providers: [],
})
export class AdminModule { }
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { UserComponent , RightsComponent ,DashboardComponent, AdminComponent } from './pages';
const routes: Routes = [
{ path: 'admin', component: AdminComponent,
children :[
{ path: 'dashboard', component: DashboardComponent},
{ path: 'user', component: UserComponent},
{ path: 'rights', component: RightsComponent},
]
},
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class AdminRoutingModule { }
AdminModule has four pages. A admin page is the root page. You can create it under the pages folder.
/app/src/admin/pages/admin.component.ts
import { Component} from '@angular/core';
@Component({
selector: 'app-admin',
templateUrl: './admin.component.html',
styleUrls: ['./admin.component.css']
})
export class AdminComponent {
}
<ul>
<li><a routerLink="dashboard">dashboard</a></li>
<li><a routerLink="user">User</a></li>
<li><a routerLink="rights">Rights</a></li>
</ul>
<router-outlet></router-outlet>
The admin page has three pages under it. dashboard, rights & user. Hence create a subfolder for all these under the pages folder.
/app/src/admin/pages/dashboard/dashboard.component.ts
import { Component } from '@angular/core';
@Component({
template: `<h1>Dashboard Component</h1>`,
})
export class DashboardComponent {
title = '';
}
import { Component } from '@angular/core';
@Component({
template: '<h1>Rights Component</h1>',
})
export class RightsComponent {
title = '';
}
import { Component } from '@angular/core';
@Component({
template: '<h1>User Component</h1>',
})
export class UserComponent {
title = '';
}
export * from './dashboard/dashboard.component';
export * from './rights/rights.component';
export * from './user/user.component';
export * from './admin.component';
export * from './pages';
export * from './github.module';
The GithubModule retrieves the list of repos from the GitHub repository for a given user. The module is created under the folder github. The components is created under the the pages folder.
/app/src/github/pages/list/repo-list.component.ts
import { Component } from '@angular/core';
import { Observable } from 'rxjs';
import { GitHubService } from '../../../core';
import { repos} from '../../../core';
@Component({
templateUrl: './repo-list.component.html',
})
export class RepoListComponent
{
userName: string ="angular"
repos: repos[];
loading: boolean=false;
errorMessage;
constructor(private githubService: GitHubService) {
}
public getRepos() {
this.loading=true;
this.errorMessage="";
this.githubService.getRepos(this.userName)
.subscribe((response) => {this.repos=response;},
(error) => {this.errorMessage=error; this.loading=false; },
() => {this.loading=false;})
}
}
<h1 class="heading"><strong>HTTP </strong>Demo</h1>
<div class="form-group">
<label for="userName">GitHub User Name</label>
<input type="text" class="form-control" name="userName" [(ngModel)]="userName">
</div>
<div class="form-group">
<button type="button" (click)="getRepos()">Get Repos</button>
</div>
<div *ngIf="loading">loading...</div>
<div *ngIf="errorMessage" class="alert alert-warning">
<strong>Warning!</strong> {{errorMessage}}
</div>
<div class='table-responsive'>
<table class='table'>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>HTML Url</th>
<th>description</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let repo of repos;">
<td>{{repo.id}}</td>
<td>{{repo.name}}</td>
<td>{{repo.html_url}}</td>
<td>{{repo.description}}</td>
</tr>
</tbody>
</table>
</div>
export * from './repolist/repo-list.component';
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { RepoListComponent } from './pages';
const routes: Routes = [
{ path: 'github', component: RepoListComponent,
children :[
{ path: 'list', component: RepoListComponent},
]
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class GithubRoutingModule {}
import { NgModule } from '@angular/core';
import { GithubRoutingModule } from './github-routing.module';
import { RepoListComponent } from './pages';
import { SharedModule } from '../shared';
@NgModule({
imports: [
GithubRoutingModule,SharedModule
],
providers: [
],
declarations: [RepoListComponent]
})
export class GithubModule { }
export * from './pages';
export * from './github.module';
This module contains three components ,HomeComponent,ContactUsComponent and AboutUsComponent
src/app/home/pages/about-us.component.ts
import { Component } from '@angular/core';
@Component({
template: `Anout Us`,
})
export class AboutUsComponent
{
}
import { Component } from '@angular/core';
@Component({
template: `Contact Us`,
})
export class ContactUsComponent
{
}
import { Component } from '@angular/core';
@Component({
template: `<h1> Welcome To Module Demo</h1>`,
})
export class HomeComponent
{
}
export * from './aboutus/about-us.component';
export * from './contactus/contact-us.component';
export * from './home/home.component';
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AboutUsComponent,ContactUsComponent,HomeComponent } from './pages';
const routes: Routes = [
{ path: '', component: HomeComponent},
{ path: 'contactus', component: ContactUsComponent},
{ path: 'aboutus', component: AboutUsComponent},
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class HomeRoutingModule {}
import { NgModule } from '@angular/core';
import { HomeRoutingModule } from './home-routing.module';
import { AboutUsComponent,ContactUsComponent,HomeComponent } from './pages';
import { SharedModule } from '../shared';
@NgModule({
imports: [
HomeRoutingModule,SharedModule
],
providers: [
],
declarations: [AboutUsComponent,ContactUsComponent,HomeComponent]
})
export class HomeModule {
}
export * from './pages';
export * from './home.module';
The CoreModule contains application-wide singleton services. In this example app, it contains a GitHubService which retrieves the list of repositories of a given user.The CoreModule is created under the folder src/app/core.
All services are created under the src/app/core/services folder. You may also create subfolder for each service.
src/app/core/models/repos.ts
export class repos {
id: string;
name: string;
html_url: string;
description: string;
}
export * from './repos';
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { repos} from '../models';
@Injectable()
export class GitHubService {
baseURL:string="https://api.github.com/";
constructor(private http:HttpClient){
}
getRepos(userName:string): Observable<repos[]> {
return this.http.get<repos[]>(this.baseURL + 'users/' + userName + '/repos')
}
}
export * from './github.service';
import { NgModule, Optional, SkipSelf } from '@angular/core';
import { GitHubService } from './services/github.service';
@NgModule,({
imports: [
],
providers: [
GitHubService
],
declarations: []
})
export class CoreModule {
constructor(@Optional,() @SkipSelf,() core:CoreModule ){
if (core) {
throw new Error("You should import core module only in the root module")
}
}
}
export * from './core.module';
export * from './services';
export * from './models';
Our Shared Module contains HeaderComponent & FooterComponent, which is used by the root module.
/src/app/shared/layout/footer/footer.component.html
<p>(c) All Rights Reserved</p>
import { Component } from '@angular/core';
@Component({
selector: 'app-footer',
templateUrl: './footer.component.html'
})
export class FooterComponent {
}
<ul>
<li>
<a class="navbar-brand" routerLink="/">home</a>
</li>
<li>
<a class="navbar-brand" routerLink="/github/list">GitHub</a>
</li>
<li>
<a class="navbar-brand" routerLink="/admin">Admin</a>
</li>
<li>
<a class="navbar-brand" routerLink="/aboutus">About</a>
</li>
<li>
<a class="navbar-brand" routerLink="/contactus">Contact</a>
</li>
</ul>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
}
li a:hover {
background-color: #111111;
}
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-header',
templateUrl: './header.component.html',
styleUrls: ['./header.component.css']
})
export class HeaderComponent {
}
export * from './footer/footer.component';
export * from './header/header.component';
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { RouterModule } from '@angular/router';
import { HeaderComponent, FooterComponent } from './layout';
@NgModule({
imports: [
CommonModule,
FormsModule,
ReactiveFormsModule,
HttpClientModule,
RouterModule
],
declarations: [ HeaderComponent,FooterComponent ],
exports: [
CommonModule,
FormsModule,
ReactiveFormsModule,
HttpClientModule,
RouterModule,
HeaderComponent,FooterComponent
]
})
export class SharedModule {
}
export * from './shared.module';
export * from './layout';
The following list shows the final structure of our application. You can change/fine-tune them as per the requirement of your project.
├── src
│ ├── app
│ │ ├── admin
│ │ │ ├── directives
│ │ │ ├── pages
│ │ │ │ ├── dashboard
│ │ │ │ │ ├── dashboard.component.ts
│ │ │ │ ├── rights
│ │ │ │ │ ├── rights.component.ts
│ │ │ │ ├── user
│ │ │ │ │ ├── user.component.ts
│ │ │ │ ├── admin.component.ts
│ │ │ │ ├── admin.component.html
│ │ │ │ ├── admin.component.css
│ │ │ │ ├── index.ts
│ │ │ ├── pipes
│ │ │ ├── admin.module.ts
│ │ │ ├── admin.routing.module.ts
│ │ │ ├── index.ts
│ │ ├── core
│ │ │ ├── models
│ │ │ │ ├── index.ts
│ │ │ │ ├── repos.ts
│ │ │ ├── services
│ │ │ │ ├── github.service.ts
│ │ │ │ ├── index.ts
│ │ │ ├── core.module.ts
│ │ │ ├── index.ts
│ │ ├── github
│ │ │ ├── pages
│ │ │ │ ├── repolist
│ │ │ │ │ ├── repolist.component.ts
│ │ │ │ │ ├── repolist.component.html
│ │ │ ├── github.routing.module.ts
│ │ │ ├── github.module.ts
│ │ │ ├── index.ts
│ │ ├── home
│ │ │ ├── pages
│ │ │ │ ├── aboutus
│ │ │ │ │ ├── about-us.component.ts
│ │ │ │ ├── contactus
│ │ │ │ │ ├── contact-us.component.ts
│ │ │ │ ├── home
│ │ │ │ │ ├── home-us.component.ts
│ │ │ │ ├── index.ts
│ │ │ ├── home-routing.module.ts
│ │ │ ├── home.module.ts
│ │ │ ├── index.ts
│ │ ├── shared
│ │ │ ├── layout
│ │ │ │ ├── footer
│ │ │ │ │ ├── footer.component.ts
│ │ │ │ │ ├── footer.component.html
│ │ │ │ ├── header
│ │ │ │ │ ├── header.component.ts
│ │ │ │ │ ├── header.component.html
│ │ │ ├── index.ts
│ ├── app-routing.module.ts
│ ├── app-wildcard-routing.module.ts
│ ├── app.component.css
│ ├── app.component.html
│ ├── app.component.spec.ts
│ ├── app.component.ts
│ ├── app.module.ts
│ ├── not-found.component.ts
